<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世纪佳缘网</title>
    <style>
        div {
            width: 250px;
            /* color: #6db8ff; */
            margin: 1px auto;
        }

        input {
            display: inline-block;
            outline: none;
            color: grey;
        }
    </style>
</head>
<body>
<div>
    <input type="text" value="邮箱id/手机号">
    <!-- <input type="text" id="acc" value="邮箱id/手机号"> -->
</div>
<script>
    //获得元素对象
    var inp = document.querySelector('input');
    // var inp = document.querySelector('#acc');
    //文本框获得焦点，提示内容消失，边框变色
    //绑定事件处理程序
    inp.onclick = function () {
        inp.style.borderColor = 'red';
        // console.log(inp.value);
        if (inp.value == '邮箱id/手机号') {
            inp.value = '';
        }
        // inp.style.color = 'black';
    }
    //输入框失去焦点
    inp.onblur = function () {
        if (inp.value == '') {
            inp.value = '邮箱id/手机号';
            inp.style.color = 'grey';
            inp.style.border= '1px solid gray';
        }else{
            inp.style.border='1px solid gray';
        }
    }
</script>
</body>
</html>